<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"      
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <f:view contentType="text/html">
        <h:head>             
            <meta http-equiv="expires" content="0"></meta>
            <meta http-equiv="Cache-Control" content="no-cache"></meta>
            <meta http-equiv="Cache-Control" content="no-cache"></meta>
            <title>.:DMES:. - Menú Principal</title>

            <link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/webStyle.css"/>
            <script type="text/javascript">

            </script>
        </h:head>
        <h:body onload="renderSizePost()">
            <p:ajaxStatus onstart="PF('statusDialog').show()" oncomplete="PF('statusDialog').hide()"/>
            <p:dialog modal="true" widgetVar="statusDialog" header="Cargando..."
                      draggable="false" closable="false" resizable="false">
                <p:graphicImage value="/images/loadBar.gif"/>
            </p:dialog>
            <p:idleMonitor timeout="#{(session.maxInactiveInterval-5)*1000}">
                <p:ajax event="idle" oncomplete="PF('dialogClose').show();" />
            </p:idleMonitor>


            <p:dialog id="dialogClose" widgetVar="dialogClose" position="center" 
                      draggable="true"  header="Cierre de Sesión" closable="false"
                      hideEffect="explode" modal="true" showEffect="explode" resizable="false" 
                      width="400" height="150">
                <h:form id="formClose">
                    <table cellspacing="30" style="margin: 0px; padding: 0px;">
                        <tr>
                            <td>
                                <p:outputLabel 
                                    value="Su sesión ha caducado, por favor vuelva a ingresar sus credenciales" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <p:commandButton value="Aceptar" 
                                                 onclick="window.location = '/DMES'"
                                                 />

                            </td>
                        </tr>
                    </table>
                </h:form>
            </p:dialog>


            <p:layout styleClass="layoutBordes">
                <p:layoutUnit position="north" collapseSize="25" collapsible="true" effect="explode"  gutter="1"
                              styleClass="layoutBordes" >
                    <div>
                        <table   class="layoutNorth">
                            <tr> 
                                <td width="200">
                                    <p:graphicImage url="images/fondo-Little.png"  styleClass="graphicLayoutNorth"
                                                    height="90" width="150"/>
                                </td>
                                <td  align="left">
                                    <p:graphicImage styleClass="imageTittle" height="90" width="800" 
                                                    url="images/sip.jpg"
                                                    />    

                                </td>
                                <td width="280" align="center" valign="middle">
                                    <table class="dataLayoutNorth" >
                                        <tr>
                                            <td style="padding-top: 5px;padding-bottom:5px; padding-left:10px; ">
                                                <table  width="100%">
                                                    <tr>
                                                        <td colspan="2" align="center">
                                                            <label class="outPutLabelDate">#{templateBean.listDateHeader()}</label>
                                                        </td>

                                                    </tr>
                                                    <tr>
                                                        <td><p:outputLabel value="Usuario: " styleClass="outPutLabelTittle"/></td>
                                                        <td style="color: #FFF;">
                                                            #{templateBean.sessionBean.scUser.idPerson.firstName} 
                                                            #{templateBean.sessionBean.scUser.idPerson.lastName}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><p:outputLabel value="Grupo: " styleClass="outPutLabelTittle"/></td>
                                                        <td style="color: #FFF;">
                                                            #{templateBean.sessionBean.scUser.idRole.name}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </p:layoutUnit>
                <p:layoutUnit position="west" collapseSize="25" collapsible="true" effect="bind" size="250" gutter="1"
                              styleClass="layoutBordesWest" resizable="true" id="lateral">
                    <f:facet name="header">    
                        Módulos
                    </f:facet>
                    <!--            <div >-->
                    <!--                <div style="width: 20%; float: left;">-->
                    <h:form id="formTreeMenu">


                        <p:tree id="treeMenu" value="#{templateBean.root}" var="nodeMenu" 
                                selectionMode="single"
                                style="border: 0px; text-align: left; font-size: 10px; vertical-align: middle; cursor: default;" 
                                animate="true"  highlight="true" dynamic="true" >

                            <p:treeNode type="Home" styleClass="divItemTreeMenu" >
                                <p:graphicImage value="/images/#{nodeMenu.icone}" height="32" width="32"/>  
                                <h:outputText value="  #{nodeMenu.name}" />
                            </p:treeNode>
                            <p:treeNode type="Folder" styleClass="divItemTreeMenu">
                                <p:graphicImage value="/images/#{nodeMenu.icone}" height="28" width="28"/>  
                                <p:commandLink value="  #{nodeMenu.name}" action="#{templateBean.navigationTree(nodeMenu)}" styleClass="itemTreeMenu"/>
                            </p:treeNode>
                            <p:treeNode type="Item" styleClass="divItemTreeMenu">
                                <p:graphicImage value="/images/#{nodeMenu.icone}" height="20" width="20"/>  
                                <p:commandLink value="  #{nodeMenu.name}" actionListener="#{templateBean.navigationTree(nodeMenu)}" styleClass="itemTreeMenu"
                                               update=":formMainTabs"/>
                            </p:treeNode>

                        </p:tree>

                    </h:form>

                </p:layoutUnit>
                <!--                <script type="text/javascript">
                                   document.getElementById("lateral").style.height = (screen.height - 480)+"px";     
                                </script>-->
                <p:layoutUnit position="center" id="layoutCenter" styleClass="layoutBordes">
                    <!--                </div>
                                    <div id="divTabs" style=" width:75%; float: right;" >-->
                    <h:form id="formMainTabs">
                        <p:panel style="padding: 0px; margin: 0px;" id="pnlFrame">
                            <f:facet name="header">
                                <p:commandButton id="tabsMenu" icon="ui-icon-gear"/>
                                <p:tieredMenu overlay="true" trigger="tabsMenu" my="right top" at="left top"  
                                              model="#{templateBean.model}" id="menuCloseTabs">
                                </p:tieredMenu>
                            </f:facet>

                            <p:tabView  id="tabMain" dynamic="true" var="tabs"
                                        styleClass="tabViewMain" scrollable="true" 
                                        value="#{templateBean.mainTabs}" activeIndex="#{templateBean.activeIndex}">




                                <p:tab id="tbEmpleados" title="#{tabs.title}" rendered="true"  >


                                    <iframe id="frame" src="#{tabs.page}" scrolling="yes" class="iframeTab" style="height: 1000px;">

                                    </iframe>


                                </p:tab>

                            </p:tabView>

                        </p:panel>   
                    </h:form>
                    <!--                </div>-->
                    <!--            </div> -->


                </p:layoutUnit>      

            </p:layout>




            <script type="text/javascript">
                function renderSizePost()
                {
                    alert("Señor usuario, recuerde que el abrir varias pestañas \nreduce la memoria del equipo y ocasiona que la \naplicación sea menos eficiente");
                    //document.getElementById("formMainTabs:pnlFrame").style.height = (screen.height - 220) + "px";
                    //document.getElementById("layoutCenter").style.height = (screen.height)+"px";
                }
            </script>
        </h:body>
    </f:view>
</html>

